<template>
  <view class="score-card">
    <view class="score-header">
      <view class="score-left">
        <text class="emoji">😊</text>
        <text class="score">{{ score }}</text>
        <text class="score-max">/ {{ maxScore }}</text>
        <text class="score-label">{{ label }}</text>
      </view>
      <view class="analysis-btn" @click="onButtonClick">
        {{ buttonText }} 
      </view>
    </view>

    <view class="status-tag">{{ status }}</view>

    <view class="progress-grid">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ScoreCard',
  props: {
    score: {
      type: String,
      default: '95'
    },
    maxScore: {
      type: String,
      default: '100'
    },
    label: {
      type: String,
      default: '心灵治愈值'
    },
    status: {
      type: String,
      default: '心灵平静状态'
    },
    buttonText: {
      type: String,
      default: '今日情绪解析'
    }
  },
  methods: {
    onButtonClick() {
      this.$emit('click');
    }
  }
};
</script>

<style>
.score-card {
  background-color: #1f2937;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  width: 100%;
  box-sizing: border-box;
}


.score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.score-left {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.emoji {
  font-size: 60rpx;
}

.score {
  font-size: 80rpx;
  font-weight: bold;
  color: #60a5fa;
}

.score-max {
  font-size: 36rpx;
  color: #9ca3af;
}

.score-label {
  font-size: 26rpx;
  color: #d1d5db;
  margin-left: 10rpx;
}

.analysis-btn {
  background-color: #3730a3;
  padding: 10rpx 30rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}

.status-tag {
  background-color: rgba(146, 64, 14, 0.5);
  color: #fbbf24;
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 50rpx;
  width: fit-content;
  margin-bottom: 30rpx;
}

.progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  width: 100%;
  box-sizing: border-box;
}
</style>